<button nz-button nzType="primary" (click)="showScopeDialog(undefined)">新增</button>
<nz-table
  #headerTable
  [nzData]="tableDataService.listOfCurrentPageData"
  [nzPageSize]="tableDataService.pageable.size!"
  nzFrontPagination="false"
  [nzScroll]="{ y: 'calc(100vh - 330px)' }"
  [nzPageIndex]="tableDataService.pageable.page!"
  nzServerRender="true"
  [nzTotal]="tableDataService.total!"
  (nzCurrentPageDataChange)="tableDataService.onCurrentPageDataChange($event)"
  (nzPageSizeChange)="tableDataService.onPageSizeChange($event)"
  (nzPageIndexChange)="tableDataService.onPageIndexChange($event)"
  nzShowPagination
  nzShowSizeChanger
>
  <thead>
    <tr>
      <!-- <th
        nzWidth="60px"
        [nzChecked]="selectListSelection.selected.length>0"
        [nzIndeterminate]="indeterminate"
        (nzCheckedChange)="onAllChecked($event)"
      ></th> -->
      <th>名称</th>
      <th>代码</th>
      <th>授权角色</th>
      <th nzWidth="100px"></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of headerTable.data">
      <!-- <td
        [nzChecked]="selectListSelection.isSelected(data)"
        (nzCheckedChange)="onItemChecked(data, $event)"
      ></td> -->
      <td>{{ data.name }}</td>
      <td>{{ data.code }}</td>
      <td>
        <nz-tag
          [nzColor]="'blue'"
          nzMode="closeable"
          *ngFor="let sysrole of data.sysroles"
          (nzOnClose)="onSysroleRemove(data.id,sysrole.id, $event)"
          >{{ sysrole.name }}</nz-tag
        >
      </td>
      <td>
        <a nz-tooltip nzTooltipTitle="编辑" (click)="showScopeDialog(data)"
          ><i nz-icon nzType="edit" nzTheme="outline"></i
        ></a>
        <a
          style="color: red"
          nz-tooltip
          nzTooltipTitle="删除"
          (click)="onDelete(data.id)"
          ><i nz-icon nzType="delete" nzTheme="outline"></i
        ></a>
        <a
          nz-tooltip
          nzTooltipTitle="授权用户"
          (click)="showPermissionDialog(data)"
          ><i nz-icon nzType="user" nzTheme="outline"></i
        ></a>
      </td>
    </tr>
  </tbody>
</nz-table>


<nz-modal
  [(nzVisible)]="isVisiableForScopeForm"
  nzTitle="新增/编辑"
  (nzOnCancel)="isVisiableForScopeForm=false"
  (nzOnOk)="onScopeFormSubmit()"
>
  <ng-container *nzModalContent>
    <form
      nz-form
      nzLayout="vertical"
      [formGroup]="scopeForm"
      (ngSubmit)="onScopeFormSubmit()"
    >
      <nz-form-item>
        <nz-form-label>名称</nz-form-label>
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="name" placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>代码</nz-form-label>
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="code" placeholder="" />
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
</nz-modal>


<nz-modal
  [(nzVisible)]="isVisibleForPermission"
  nzTitle="授权"
  (nzOnOk)="addPermission()"
  (nzOnCancel)="isVisibleForPermission=false"
>
  <ng-container *nzModalContent>
    拟授权URL:
    {{ selectedScope.name }}
    <br />
    授权角色列表：
    <br />
    <app-sysrole-search></app-sysrole-search>
  </ng-container>
</nz-modal>
